<template>
	<view class="result-detail">
		<view class="exerc-card sheet">
			<!-- 答题卡 -->
			<view class="card-title su-border2">
				<view class="title-left">
					<text class="exerc-type">答题卡</text>
				</view>
				<view class="title-right">
          <text class="ansed-text">正确</text>
          <text class="error-text ansed-text">错误</text>
					<text class="ansno-text">未作答</text>
				</view>
			</view>
			<!-- 题目内容 -->
			<view class="card-content">
				<view class="item-content">
					<view class="answer-item" @click="itemClick(index)"
						:class="[getClass(item.is_correct)]"
						v-for="(item, index) in exercList" :key="index">
						<text>{{ index + 1 }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	/**
	 * 习题答题卡
	 */
	export default {
		props: {
			exercList: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return { }
		},
		methods: {
			itemClick(index) {
				this.$emit('select', index)
			},
      getClass(isCorrect) {
        console.log('isCorrect',isCorrect)
        if (isCorrect === 1) {
          return 'success'
        } else if (isCorrect === 0) {
          return 'error'
        } else {
          return ''
        }
      }
		}
	}
</script>

<style lang="scss">
	@import "./exerc-card.scss";
  .result-detail {
    .success {
      background: #07c160 !important;
      .uni-text {
        color: #ffffff !important;
      }
    }
    .error {
      background: red !important;
      .uni-text {
        color: #ffffff !important;
      }
    }

    .ansed-text {
      &::before {
        background: #07c160 !important;
        border-color: #07c160 !important;
      }
    }
    .error-text {
      &::before {
        background: red !important;
        border-color: red !important;
      }
    }
  }
</style>
